<template>
  <div class="dropdownBox">
 <div class="cover">
   <img v-show="coverImg!=''||coverOnlineSrc!=''" class="imgCover" :src="coverImg==''?coverOnlineSrc :coverImg" alt="">
   <div class="textCover"><span v-show="coverImg!=''" @click="deleteCover" style="margin-right:10px;">Delete</span><span style="margin-right:10px;" @change="setCover"><input accept="image/png, image/jpeg" class="imgfile" type="file"></input>Set Cover</span></div>
 </div>
 <div class="articleType">
   <div style="margin-bottom:0.2rem;font-size:0.5rem">Article type</div>
   <el-radio-group mini class="typeGroup" v-model="radio">
    <el-radio class="typeItem" :label="3">Original</el-radio>
    <el-radio class="typeItem" :label="6">Reprint</el-radio>
    <el-radio class="typeItem" :label="9">translate</el-radio>
  </el-radio-group>
 </div>
 <div class="ReleaseTo">
   <div style="margin-bottom:0.2rem;font-size:0.5rem">Release to</div>
   <el-select v-model="value" clearable placeholder="selected">
    <el-option
    @click.native="changeOption(item.type)"
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
 </div>
 <div class="releaseBtom">
   <div @click="release" class="releaseBtn">
     Confirm Release
   </div>
 </div>
  </div>
</template>

<script>
import { getUniqueID } from "util/getUniqueID"; //生成图片唯一ID
// vuex
import { mapMutations, mapState } from "vuex"; //引入状态管理
import {getUploadtokenByQiniu} from 'network/upload'//获取图片上传的token
import axios from 'axios'//axios用于网络请求
  export default {
    name:'dropdownBox',
    // props: {
    //    coverImg: {
    //     type: String,
    //     default:"" 
    //   },
    // },
    data() {
      return {
        uploadArea: "https://upload-z2.qiniup.com",//此处为七牛云华南区的空间地址
        uploadUrl: "https://we-teach-space.humianyuan.cn/", //上传后图片的域名地址
        token:'',//七牛云token
        radio:3,
         options: [ {
          value: '选项1',
          label: '实时资讯',
          type:"realtimes"
        }, {
          value: '选项2',
          label: '政策资讯',
          type:"policy"
        },
        {
          value: '选项3',
          label: '课程资讯',
          type:"subject"
        },
        {
          value: '选项4',
          label: '百科常识',
          type:"nous"
        },
        {
          value: '选项5',
          label: '试题资讯',
          type:"test"
        },
        {
          value: '选项6',
          label: '学校资讯',
          type:"school"
        },
        {
          value: '选项7',
          label: '系统公告',
          type:"notice"
        },
        ],
        type: 'realtimes',
        value: '选项1',
        file:'',
        coverImg:'',
        coverImgName:'',//封面图片名称
        coverOnlineSrc:'',//封面线上地址
        login_status:'admin',
        login_user:'admin001'
      }
    },
    computed: {
 
    },
    methods: {
      // 文章内容存入vuex
      deleteCover() {//删除封面
       this.coverImg = '';
      },
      changeOption(type){
        this.type = type
        console.log("您选择了:",this.type)
      },
      setCover(e){//设置封面顺便获取token
       
      
        e = e || window.event
        this.file = e.target.files[0];
        this.coverImgName = 'wt_'+getUniqueID()+'_'+this.file.name;
        console.log("图片名称："+this.coverImgName)
        this.coverImg = window.URL.createObjectURL(this.file);
        // 获取token 需要三个参数：1.username【用户账号】 2.status【用户身份】 3.fileName【文件名】
      getUploadtokenByQiniu(this.login_user,this.login_status, this.coverImgName).then(res=>{
        this.token = res.token;
        console.log("接收到后台传过来的七牛云token:",this.token)
      })
      },
      // upload
      release(){
        if(this.token==''||this.file==''||this.coverImgName==''){
          this.$emit('release')
        }else{
          let that = this;
        let formData = new FormData(); //使用FormData.append来添加键/值对到表单里面；
         formData.append("file",this.file)//直接上传file文件，此处是文件对象方式上传, filePath_or_stream是文件数据流
          formData.append("token",this.token)
          formData.append("key",this.coverImgName)
         // 请求头的Content-Type 用于指示资源的MIME类型【media type】
          // 设置媒体类型为 multipart/form-data，表示此时的表单数据携带的是二进制流数据
          axios.post(this.uploadArea, formData, {
              headers: { "Content-Type": "multipart/form-data" },
            })
            .then((res) => {
              console.log(res)
              if (res.status == 200) {
                that.coverOnlineSrc = ''//图片上传后的地址
                that.coverOnlineSrc = this.uploadUrl+res.data.key
                
                console.log("文章封面网络地址："+that.coverOnlineSrc);
                this.$emit('release',this.token)//token发送给editor组件
              } else {
                this.$message.error("上传失败");
              }
            });
        }
      }
    },
    activated() {
      let that = this
      that.coverOnlineSrc = ''
      if(that.$route.query.type!=undefined){
        console.log("that.$route.query.type:",that.$route.query.type)
        let type = that.$route.query.type
        if(type=='realtimes'){
            that.value = '选项1';
          }else if(type=='policy'){
            that.value = '选项2';
          }else if(type=='subject'){
            that.value = '选项3';
          }else if(type=='nous'){
            that.value = '选项4';
          }else if(type=='test'){
            that.value = '选项5';
          }else if(type=='school'){
            that.value = '选项6';
          }else if(type=='notice'){
            that.value = '选项7';
          }
      }
    },
  }
</script>

<style lang="less" scoped>
.imgfile{
  position: absolute;
  opacity: 0;
  width: 100%;
}
/deep/.el-radio__label {
    font-size: 14px;
    padding-left: 5px;
}
/deep/.el-radio {
	color: #606266;
	cursor: pointer;
	margin-right: 10px;
}
@media screen and (max-width:1024px) {
  /deep/.el-radio {
	color: #606266;
	cursor: pointer;
	margin-right: 5px;
}
}
@media screen and (max-width:768px) {
  /deep/.el-radio {
	color: #606266;
	cursor: pointer;
	margin-right: 2px;
}
}
@media screen and (max-width:412px) {
.articleType{
  display: none;
}
}
.dropdownBox{
  height: 10rem;
  padding: 0.5rem 0rem 0.3rem ;
  width: 9rem;
  background-color: #ffffff;
  box-shadow: 1px 1px 10px #888888,-1px -1px 10px #888888 ;
  .cover{
    background-color: rgba(30, 30, 30, 0.1);
    position: relative;
    border: solid 1px #5D5D5D;
    height: 3.5rem;
    width: 90%;
    margin: 0 auto;
    .textCover{
      width: 100%;
      display: flex;
      flex-direction: row-reverse;
      position: absolute;
      bottom: 3%;
      span{
      // width:2rem;
      position: relative;
      cursor: pointer;
      background-color: #343a40;
      padding: 0.1rem 0.2rem;
      border-radius: 5%;
      color: #ffffff;
      text-align: center;
      font-size: 0.5rem;
      }
    }
    .textCover{
       span:hover{
        background-color: #202020;
       }
    }
    .imgCover{
      width: 100%;
      height: 100%;
    }
  }
  .articleType{
    width: 90%;
    margin: 0.3rem auto;
    // background-color: cadetblue;
    .typeGroup{
      display: flex;
      // justify-content: space-between;
      width: 100%;
      .typeItem{
      width: 30%;
      }
    }
  }
  .ReleaseTo{
   width: 90%;
   margin: 0.3rem auto; 
  }
  .releaseBtom{
    position: absolute;
    display: flex;
    justify-content: center;
    bottom: 0%;
    height: 2rem;
    width: 100%;
    border-top: 1px solid rgba(30, 30, 30, 0.2);
    .releaseBtn{
      margin-top: 0.5rem;
      cursor: pointer;
      width: 80%;
      height: 1rem;
      font-size: 0.8em;   
      text-align: center;
      background-color: #13a552;
      border-radius: 5px;
      color: #ffffff;
      line-height: 1rem;
    }
    .releaseBtn:hover{
      background-color: #007046;
    }
  }
}
</style>